<template>
  <div class="home">
    <header>
      <hoomnavbar :active-index="0"/>
    </header>
    <main>
      <div class="swiper-wrap">
         <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
              <img src="../assets/imgs/home/banner_1.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img src="../assets/imgs/home/banner_1.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img src="../assets/imgs/home/banner_1.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img src="../assets/imgs/home/banner_1.jpg" alt="">
            </swiper-slide>
            <!-- <swiper-slide v-for="(item,index) in swiper" :key="index">
              <img :src="item.path" alt="">
            </swiper-slide> -->
            <!-- <div class="swiper-pagination" slot="pagination"></div> -->
          </swiper>
      </div>
      <div class="perplex-box">
          <div class="perplex-top animate-el">
            <div class="perplex-top-item">
              <span class="perplex-top-data">14年</span>
              <span class="perplex-top-text">14年匠心研发</span>
            </div>
            <div class="perplex-top-item">
              <span class="perplex-top-data">1000+</span>
              <span class="perplex-top-text">覆盖城市</span>
            </div>
            <div class="perplex-top-item">
              <span class="perplex-top-data">10W+</span>
              <span class="perplex-top-text">实体商户</span>
            </div>
          </div>
          <div class="perplex-container">
            <div class="perplex-container-caption">
                <div>您是否有以下困扰？</div>
                <div class="shot-line"></div>
            </div>
            <div class="perplex-container-content animate-el">
              <div class="perplex-container-item">
                <span class="iconfont location"></span>
                <div class="container-text">
                  <p>定位不清晰</p>
                  <p>经营难</p>
                </div>
              </div>
              <div class="perplex-container-item">
                <span class="iconfont yingxiao"></span>
                <div class="container-text">
                  <p>营销成本高</p>
                  <p>引流难</p>
                </div>
              </div>
              <div class="perplex-container-item">
                <span class="iconfont chengyuan"></span>
                <div class="container-text">
                  <p>客户留不住</p>
                  <p>留存难</p>
                </div>
              </div>
              <div class="perplex-container-item">
                <span class="iconfont lianqinliandongliliang"></span>
                <div class="container-text">
                  <p>员工流动大</p>
                  <p>管理难</p>
                </div>
              </div>
            </div>
          </div>
      </div>
      <div class="project-wrap">
        <div class="project-left">
            <div class="project-container">
              <div class="project-item">
                <img class="text-pic" src="../assets/imgs/home/what.png" alt="">
                <div class="project-item-text">我们能够为您做什么？</div>
              </div>
              <div class="project-item zoomin">
                <img src="../assets/imgs/home/sass.png" alt="">
                <div class="project-cover">
                  <div class="project-cover-caption">
                    <span class="iconfont xitong"></span>
                    <p>SAAS系统</p>
                  </div>
                  <div class="project-cover-content">
                    <p>SAAS系统帮您高效管理门店,</p>
                    <p>节约成本</p>
                  </div>
                </div>
              </div>
              <div class="project-item zoomin">
                <img src="../assets/imgs/home/h5.png" alt="">
                <div class="project-cover">
                  <div class="project-cover-caption">
                    <span class="iconfont shangcheng"></span>
                    <p>H5商城</p>
                  </div>
                  <div class="project-cover-content">
                    <p>H5商城为您提供资源整合,</p>
                    <p>实现共享经济</p>
                  </div>
                </div>
              </div>
              <div class="project-item zoomin">
                <img src="../assets/imgs/home/solve.png" alt="">
                <div class="project-cover">
                  <div class="project-cover-caption">
                    <span class="iconfont jiejuefangan"></span>
                    <p>解决方案</p>
                  </div>
                  <div class="project-cover-content">
                    <p>超级门店解决方案,</p>
                    <p> 一站式解决您的经营管理难题！</p>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="project-right">
          <div class="project-right-top">
            <div class="project-item zoomin">
                <img src="../assets/imgs/home/ip.png" alt="">
                <div class="project-cover">
                  <div class="project-cover-caption">
                    <span class="iconfont ip"></span>
                    <p>IP系统</p>
                  </div>
                  <div class="project-cover-content">
                    <p>IP系统为您快速实现引流拓客,</p>
                    <p>提升收益</p>
                  </div>
                </div>
              </div>
          </div>
          <div class="project-right-bottom">
            
          </div>
        </div>
      </div>
      <div class="function-box">
        <div class="function-wrap">
          <div class="function-caption">
            <h3 ref="captiontop" class="animate-el">3大软件系统，9项核心功能</h3>
            <p ref="captionbottom" class="animate-el">强大的多元功能，帮您高效管店拓客</p>
          </div>
          <div class="function-container">
            <ul>
              <li class="animate-el">
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/dianwu.png" alt="">
                  </div>
                  <p>店务管理</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/shouyin.png" alt="">
                  </div>
                  <p>收银管理</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/shangping.png" alt="">
                  </div>
                  <p>商品管理</p>
                </div>
              </li>
              <li class="animate-el">
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/huiyuan.png" alt="">
                  </div>
                  <p>会员管理</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/yuangong.png" alt="">
                  </div>
                  <p>员工管理</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/liansuo.png" alt="">
                  </div>
                  <p>连锁管理</p>
                </div>
              </li>
              <li class="animate-el">
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/baobiao.png" alt="">
                  </div>
                  <p>报表管理</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/shangcheng.png" alt="">
                  </div>
                  <p>商城定制</p>
                </div>
                <div class="function-item">
                  <div class="svg-wrap">
                    <img src="../assets/imgs/home/icon/yingxiao.png" alt="">
                  </div>
                  <p>营销拓客</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="marketing-box">
        <div class="marketing-caption">
          <img src="../assets/imgs/home/marketing.png" alt="Professional operation team">
          <h2 class="animate-el">专业运营团队，12大营销手段</h2>
          <div class="bot-line"></div>
          <p class="animate-el">1v1量身定制，有效提高营销收益</p>
        </div>
        <div class="marketing-container">
          <ul>
            <li class="animate-el">
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                企业诊断
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                品牌塑造
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                IP打造
              </div>
            </li>
            <li class="animate-el">
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                精准定位
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                精准投放
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                精准营销
              </div>
            </li>
            <li class="animate-el">
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                私域流量
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                活动策划
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                内容运营
              </div>
            </li>
        
            <li class="animate-el">
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                商城运营
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                社群运营
              </div>
              <div class="marketing-item">
                <span class="iconfont-pic"></span>
                数据分析
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="super-shop">
        <div class="super-shop-caption">
          <h2 class="animate-el">超级门店解决方案</h2>
          <p class="animate-el">尊享个性化私人订制，灵活拓展，售后无忧</p>
        </div>
        <img class="supershop-img zoomin" src="../assets/imgs/home/super_shop.png" alt="">
        <div class="super-shop-bottom animate-el">
          <p>国内首家汇集数据中心、人像采集、CRM系统为一体的聚合解决方案，助力商家打造超级门店，</p>
          <p>全网多渠道轻松获客，实现一对一个性化营销，高效拓锁留升，流量自循环~</p>
        </div>
      </div>
      <div class="scope-range">
        <div class="scope-range-wrap">
          <div class="scope-range-left">
            <div>
              <img class="scope-text-pic" src="../assets/imgs/home/scope.png" alt="">
              <b>适用范围</b>
              <p>专注于实体商家，经验丰富，值得信赖</p>
            </div>
            <img class="scope-text-bg" src="../assets/imgs/home/figure_1.png" alt="">
          </div>
          <div class="scope-range-right">
            <p class="animate-el">
            专业服务于实体商家，无论是您是单店还是连锁品牌，是街边小店还是星级商家，在云浩皆可找到适合您的解决方案！尊享VIP私人订制，对症下药，有效解决门店拓留锁升难题，客流/业绩持续增长！
            </p>
          </div>
        </div>
      </div>
      <div class="cooperation-box">
        <div class="cooperation-caption">
          <h2 class="animate-el">合作伙伴</h2>
          <p class="animate-el">累计帮助10万+实体商家实现高效管店拓客，快速提升收益</p>
        </div>
        <div class="cooperation-container">
          <div class="log-wrap">
              <ul class="log-slide" :style="'left:'+logLeft+'%;'">
                <li class="row">
                  <ul>
                    <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/hutaoli.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/lufeng.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/onhair.png" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/instyle.png" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/mingliu.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/yingjieer.jpg" alt="">
                    </li>
                    <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/shangyi.jpg" alt="">
                    </li>
                  </ul>
                </li>
                <li class="row">
                  <ul>
                    <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/qiyu.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/jimei.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/haoli.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/yiling.jpg" alt="">
                    </li>
                     <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/kekemei.jpg" alt="">
                    </li>
                    <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/zhiyu.jpg" alt="">
                    </li>
                    <li class="col">
                      <img class="zoomin" src="../assets/imgs/home/logo/feitong.jpg" alt="">
                    </li>
                  </ul>
                </li>
              </ul>
          </div>
          <div class="button-wrap">
            <span class="button-left iconfont arrow-left" @click="slideHandler(true)"></span>
            <span class="button-right iconfont arrow-right" @click="slideHandler(false)"></span>
          </div>
        </div>
      </div>
      <aside class="aside" :style="'right:'+(showAside ? '0px' : '')" @mouseenter="showAsideHandler" @mouseleave="hiddenAside">
        <div class="aside-caption">
          <span class="iconfont shouye"></span>
          <b>付款方式</b>
        </div>
        <div class="erweima-wrap">
          <div class="erweima-box">
            <img src="../assets/imgs/home/weixin.png" alt="">
            <p>微信账户</p>
          </div>
          <div class="erweima-box">
            <img src="../assets/imgs/home/zhifubao.png" alt="">
            <p>支付宝账户</p>
          </div>
        </div>
        <div class="bottom-text">
          <router-link to="/aboutus#pay">
            其他付款方式
          </router-link>
        </div>
        <img class="ball-btn" @click="ballBtn" src="../assets/imgs/home/ball_btn.png" alt="">
      </aside>
    </main>
    <footer>
      <hoomfooter/>
    </footer>
  </div>
</template>

<script>
import Observer from '../utils/observer.js'
// import 'swiper/css/swiper.css'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Home',
  components: {
    hoomnavbar,
    hoomfooter,
    Swiper,
    SwiperSlide, 
  },
  data(){
    return{
      swiper:[
        {
          path:'http://pic.yupoo.com/isfy666/695a996e/393b433f.jpg'
        },
        {
          path:'http://pic.yupoo.com/isfy666/04190d49/6c109d2f.jpg'
        },
        {
          path:'http://pic.yupoo.com/isfy666/c35dc34c/22ac2192.jpg'
        },
        {
          path:'http://pic.yupoo.com/isfy666/e13a3060/c52faf58.png'
        }
      ],
      logLeft:0,
      minLeft:-40,
      showAside:false,
      slidesPerView: 4,
      swiperOptions:{
        // slidesPerView:4,
         autoplay: true,
         centerInsufficientSlides:true,
        // 环路播放
        loop: true,
      },
      animaterEls:[], // 动画元素
      Observer:'',
      Observer2:'',
    }
  },
  mounted(){
    const els = document.querySelectorAll('.animate-el')
    this.Observer = Observer({
            els:els
            },
            function(el){
              el.style.visibility = 'visible';
              el.classList.add('animate__fadeInDown')
            });
    const els2 = document.querySelectorAll('.zoomin')
    this.Observer2 = Observer({
            els:els2
            },
            function(el){
                el.style.visibility = 'visible';
                el.classList.add('animate__zoomIn')
            });
      let registerData = {
        companyName:'',
        phoneNumber:'',
        linkman:'',
        companyAdress:'',
        leaveMessage:''
      }
  },
  beforeDestroy(){
    this.Observer && window.removeEventListener('scroll',this.Observer);
    this.Observer && window.removeEventListener('scroll',this.Observer2);
  },
  methods:{
    add(){
      this.swiper.push({
          path:'http://pic.yupoo.com/isfy666/e13a3060/c52faf58.png'
      })
      this.fn()
    },
    reduce(){
      this.swiper.pop()
      this.fn()

    },
    fn(){
      if(this.swiper.length>4){
        this.swiperOptions.loop = true;
      }else{
        this.swiperOptions.loop = false;

      }

    },
    slideHandler(isLeft){
      console.log(isLeft);
      if(isLeft && this.logLeft < 0){
        this.logLeft +=20;
      }
      if(!isLeft && (this.logLeft > this.minLeft)){
        this.logLeft -=20;
      }
    },
    ballBtn(){
      this.showAside = !this.showAside;
      },
    showAsideHandler(){
      this.showAside = true;
    },
    hiddenAside(){
      this.showAside = false;
    }
    
  },
}
</script>
<style lang="less" scoped>
@import '../assets/css/variable.less';
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid red;
  background-color: #000;
  color: white;
}
.home{
  .aside{
    width: 300 * @crem;
    // height: 995 * @crem;
    height:600 * @crem;
    // height: 60vh;
    box-sizing: border-box;
    padding-top: 40 * @crem;
    padding-left: 90 * @crem;
    position: fixed;
    top: 50%;
    right: -275 * @crem;
    transform: translateY(-50%);
    z-index: 50;
    background: url('../assets/imgs/home/aside_bg.png') no-repeat;
    background-size: cover;
    border-radius: 40 * @crem 0 0 40 * @crem;
    display: flex;
    flex-flow: column nowrap;
    align-self: start;
    transition: right .3s;
    .aside-caption{
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      .iconfont{
        color: #378FFF;
        font-size: 38 * @crem;
        margin-right: 10 * @crem;
      }
      b{
        font-size: 25 * @crem;
        color: #5095ED;
        font-weight: bold;
      }
    }
    .erweima-wrap{
      margin-top: 15 * @crem;
      width: 150 * @crem;
      img{
        width: 100%;
        height: 150 * @crem;
      }
      .erweima-box{
        margin-bottom: 20 * @crem;
        p{
          margin-top: 5 * @crem;
          font-size: 24 * @crem;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
    .bottom-text{
      width: 150 * @crem;
      text-align: center;
      a{
        display: inline-block;
        color: #fff;
        border-bottom: 1px solid #ffffff;
        font-size: 16 * @crem;
        font-weight: 500;
        white-space: nowrap;
      }
      @media screen and(max-width: 1024px) {
        transform: scale(.8);
      }
    }
    .ball-btn{
      position: absolute;
      top: 0;
      bottom: 0;
      left: -75 * @crem;
      margin: auto;
      height: 35 * @crem;
      width: 90 * @crem;
      overflow: hidden;
      cursor: pointer;
    }
  }
  .swiper-wrap{
    height: 700 * @crem;
    .swiper-container{
      height: 100%;
    }
    img{
      height: 100%;
    }
    .swiper-slide{
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
  }
  .perplex-box{
    height: 622 * @crem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    
    .perplex-top{
      width: 1165 * @crem;
      height: 175 * @crem;
      box-sizing: border-box;
      padding-top: 44 * @crem;
      border-radius: 30 * @crem;
      box-shadow: 0 8 * @crem 24 * @crem 0px rgba(98, 98, 98, 0.2);
      margin: 0 auto;
      // margin-top: -89px;
      position: relative;
      background-color: #fff;
      top: -89 * @crem;
      z-index: 10;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      .perplex-top-item{
        height: 81 * @crem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        .perplex-top-data{
          font-size: 40 * @crem;
          color: #71A5F5;
          font-weight: 500;
        }
        .perplex-top-text{
          font-size: 18 * @crem;
          color: #222832;
        }
      }
    }
    .perplex-container{
      height: 412 * @crem;
      .perplex-container-caption{
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        height: 69 * @crem;
        font-size: 40 * @crem;
        color: #1B1B1B;
        .shot-line{
          height: 5 * @crem;
          background: #3B8EFF;
          width: 51 * @crem;
          border-radius: 3 * @crem;
        }
      }
      .perplex-container-content{
        margin-top: 55 * @crem;
        width: 1442 * @crem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        .iconfont{
          color: #4A97FF;
          font-size: 70 * @crem;
        }
        .container-text{
          font-size: 22 * @crem;
          margin-top: 33 * @crem;
          text-align: center;
        }
      }
    }
  }
  .project-wrap{
    height: 807 * @crem;
    display: flex;
    flex-flow: row nowrap;
    .project-item{
      width: 460 * @crem;
      height: 390 * @crem;
      position: relative;
      overflow: hidden;
      border-radius: 20 * @crem;
      overflow: hidden;
      box-sizing: border-box;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .text-pic{
        width: 443 * @crem;
        height: 138 * @crem;
      }
    }
    .project-cover{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 313 * @crem;
          left: 0;
          z-index: 10;
          background: rgba(0, 0, 0, .59);
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          align-items: center;
          transition: all .3s;
          .project-cover-caption{
            width: 100%;
            height: 77 * @crem;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-size: 32 * @crem;
            position: relative;
            p{
              margin-left: 16 * @crem;
            }
            .iconfont{
              font-size: 50 * @crem;
            }
          }
          .project-cover-caption::before{
            content: '';
            display: block;
            position: absolute;
            width: 51 * @crem;
            height: 5 * @crem;
            border-radius: 3 * @crem;
            background-color: #3B8EFF;
            top: 100%;
            left: 0;
            right: 0;
            margin: 0 auto;
          }
          .project-cover-content{
            margin-top: 24 * @crem;
            font-size: 24 * @crem;
            color: #fff;
            line-height: 36 * @crem;
          }
        }
    .project-item:hover .project-cover{
        top: 0;
        padding-top: 98 * @crem;
    }
    .project-left{
      box-sizing: border-box;
      width: 1230 / 1920 * 100vw;
      height: 100%;
      padding-right: 31 * @crem;
      position: relative;
      .project-container{
        margin-left: auto;
        width: 950 * @crem;
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        .project-item:first-child{
          padding-top: 14 * @crem;
          padding-bottom: 31 * @crem;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          .project-item-text{
            font-size: 70 * @crem;
            color: #fff;
            font-weight: bold;
            line-height: 91 * @crem;
            text-align: left;
          }
        }
        .project-item:nth-child(n+3){
          margin-top: 27 * @crem;
        }
        
        
      }
    }
    .project-left::before{
      content: '';
      display: block;
      position: absolute;
      top: 76 * @crem;
      left: 0;
      height: 655 * @crem;
      width: 1074 * @crem;
      background-color: #4B98FF;
      z-index: -1;
    }
    .project-right{
      width: 690 / 1920 * 100vw;
      height: 100%;
      .project-right-bottom{
        width: 100%;
        height: 393 * @crem;
        margin-top: 25 * @crem;
        background: #4B98FF url('../assets/imgs/home/figure_1.png')left bottom no-repeat;
      }
    }
  }
  .function-box{
    height: 770 * @crem;
    .function-caption{
      text-align: center;
      margin-top: 99 * @crem;
      box-sizing: border-box;
      padding-bottom: 27 * @crem;
      position: relative;
      p{
        margin-top: 30 * @crem;
        color: #8E8E8E;
        font-size: 28 * @crem;
      }
      h3{
        font-size: 40 * @crem;
        color: #1B1B1B;
        font-weight: 400;
      }
    }
    .function-caption::before{
      content: '';
      display: block;
      position: absolute;
      width: 51 * @crem;
      height: 5 * @crem;
      border-radius: 3 * @crem;
      background-color: #3B8EFF;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    .function-wrap{
      width: 1278 * @crem;
      margin: 0 auto;
    }
    .function-container{
      margin-top: 98 * @crem;
      li{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 80 * @crem;
      }
      li:first-child{
        margin-top: 0;
      }
      .function-item{
        font-size: 30 * @crem;
        color: #3C3C3C;
        display: flex;
        flex-flow: row nowrap;
        .svg-wrap{
          width: 35 * @crem;
          height: 35 * @crem;
          // border: 1px solid red;
          margin-right: 28 * @crem;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .marketing-box{
    height: 812 * @crem;
    width: 1662 * @crem;
    box-sizing: border-box;
    padding-top: 86 * @crem;
    margin: 0 auto;
    background: url('../assets/imgs/home/bg_1.png') center no-repeat;
    .marketing-caption{
      img{
        width: 1000 *@crem;
      }
      h2{
        margin-top: 33 * @crem;
        font-size: 42 * @crem;
        font-weight: 500;
        color: #FFFFFF;
      }
      .bot-line{
        width: 522 * @crem;
        height: 0;
        margin: 0 auto;
        border-bottom: 3 * @crem dotted #fff;
        margin-top: 17 * @crem;
      }
      p{
        margin-top: 26 * @crem;
        font-size: 32 * @crem;
        color: #fff;

      }
    }
    .marketing-container{
      width: 1064 * @crem;
      margin: 0 auto;
      margin-top: 92 * @crem;
      li{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 35 * @crem;
        .marketing-item{
          min-width: 210 * @crem;
          font-size: 28 * @crem;
          font-weight: 500;
          color: #fff;
          text-align: left;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          .iconfont-pic{
            display: inline-block;
            width: 35 * @crem;
            height: 35 * @crem;
            background: url('../assets/imgs/home/icon/icon_hook.png') no-repeat;
            background-size: cover;
            margin-right: 22 * @crem;
          }
        }
      }
    }
  }
  .super-shop{
    height: 1000 * @crem;
    box-sizing: border-box;
    padding-top: 97 * @crem;
    .super-shop-caption{
      padding-bottom: 27 * @crem;
      position: relative;
      h2{
        font-size: 40 * @crem;
        color: #1B1B1B;
      }
      p{
        margin-top: 31 * @crem;
        font-size: 28 * @crem;
        color: #8E8E8E;
      }
    }
    .super-shop-caption::before{
      content: '';
      display: block;
      position: absolute;
      width: 51 * @crem;
      height: 5 * @crem;
      border-radius: 3 * @crem;
      background-color: #3B8EFF;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    .supershop-img{
      margin-top: 78 * @crem;
      height: 376 * @crem;
    }
    .super-shop-bottom{
      margin-top: 100 * @crem;
      font-size: 24 * @crem;
      color: #363636;
      line-height: 52 * @crem;
      text-align: center;
    }
  }
  .scope-range{
    height: 260 * @crem;
    box-sizing: border-box;
    background-color: #4B98FF;
    text-align: left;
    display: flex;
    flex-flow: row nowrap;
    .scope-range-wrap{
      width: 1625 * @crem;
      margin: 0 auto;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
    }
    .scope-range-left{
      width: 715 * @crem;
      height: 100%;
      box-sizing: border-box;
      padding: 0 45 * @crem;
      background-color: #fff;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      .scope-text-pic{
        width: 612 * @crem;
        height: 43 * @crem;
      }
      .scope-text-bg{
        width: 624 *@crem;
        height: 65 * @crem;
      }
      b{
        margin-top: 22 * @crem;
        font-size: 52 * @crem;
        color: #5A8CED;
        font-weight: 500;
      }
      p{
        color: #323232;
        font-size: 36 * @crem;
        margin-top: 21 * @crem;
      }
    }
    .scope-range-right{
      padding: 45 * @crem 58 * @crem;
      padding-right: 0;
      p{
        width: 848 * @crem;
        font-size: 26 * @crem;
        line-height: 46 * @crem;
        color: #fff;
      }
    }
  }
  .cooperation-box{
    height: 842 * @crem;
    box-sizing: border-box;
    padding-top: 92 * @crem;
    .cooperation-caption{
      padding-bottom: 27 * @crem;
      position: relative;
      h2{
        color: #1B1B1B;
        font-size: 40 * @crem;

      }
      p{
        margin-top: 31 * @crem;
        font-size: 26 * @crem;
        color: #8E8E8E;
      }
    }
  }
  .cooperation-caption::before{
    content: '';
      display: block;
      position: absolute;
      width: 51 * @crem;
      height: 5 * @crem;
      border-radius: 3 * @crem;
      background-color: #3B8EFF;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
  }
  .cooperation-container{
    width: 1420 * @crem;
    margin: 0 auto;
    margin-top: 62 * @crem;
    // overflow: hidden;
    // height: 366 * @crem;
    .log-wrap{
      width: 100%;
      height: 366 * @crem;
      overflow: hidden;
      position: relative;
      .log-slide{
        position: absolute;
        left: 0;
        top: 0;
        transition: left .3s;
      }
    }
    .row ul{
      display: flex;
      flex-flow: row nowrap;
    }
    .row:last-child{
      margin-top: 36 * @crem;
    }
    .col{
      flex: none;
      width: 242 * @crem;
      height: 165 * @crem;
      box-sizing: border-box;
      border: 1px solid #C2C2C2;;
      background: #fff;
      margin: 0 21 * @crem;
      overflow: hidden;
      img{
        // width: auto;
        height: 100%;
        // width: 100%;
      }
    }
    .button-wrap{
      margin: 0 auto;
      margin-top: 54 * @crem;
      span{
        color: #C2C2C2;
        font-size: 24 * @crem;
        cursor: pointer;
        display: inline-block;
        width: 47 * @crem;
        height: 47 * @crem;
        border-radius: 50%;
        line-height: 47 * @crem;
        text-align: center;
        border: 2px solid #C2C2C2;
        margin: 0 9 * @crem;
      }
    }
  }
}
</style>
